<template>
    <div>
        <div class="tabs">
            <div class="tabs-content">
                <div :data-font="$i18n.locale" class="tab mouse-active" :class="tabIndex == item.id ? 'active' : ''"
                    v-for="item in tabs" :key="item.id" @click="tabIndex = item.id">{{ item.name }}
                </div>
            </div>
        </div>
        <!-- 规则 -->
        <div v-show="tabIndex === 0">
            <div class="rules-groups">
                <div class="rules-group">
                    <span class="title" :data-font="$i18n.locale">{{
                        $t('application.routine.rules.group7.title')
                    }}</span>
                    <div class="text">
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group7.p1')
                        }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group7.p2')
                        }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group7.p3')
                        }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group7.p4')
                        }}
                        </p>
                    </div>
                </div>
               
                <div class="rules-group">
                    <span class="title" :data-font="$i18n.locale">{{
                        $t('application.routine.rules.group1.title')
                    }}</span>
                    <div class="text">
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group1.p1')
                        }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group1.p2')
                        }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group1.p3')
                        }}
                        </p>
                    </div>
                </div>
                <div class="rules-group">
                    <span class="title" :data-font="$i18n.locale">{{
                        $t('application.routine.rules.group2.title')
                    }}</span>
                    <div class="text">
                        <p :data-font="$i18n.locale" class="rules-content">
                            {{ $t('application.routine.rules.group2.subheadings1') }}<br>
                            {{ $t('application.routine.rules.group2.p1') }}<br>
                            {{ $t('application.routine.rules.group2.p2') }}<br>
                            {{ $t('application.routine.rules.group2.p3') }} <i class="link">{{
                                $t('application.routine.rules.group2.btn1')
                            }}
                                <a class="link-btn" target="_blank" :data-font="$i18n.locale"
                                    :href="$i18n.locale == 'zh' ? 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/%E8%AF%9A%E4%BF%A1%E6%89%BF%E8%AF%BA%E4%B9%A6.docx' : 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/Integrity%20Declaration%20Form.docx'">{{
                                        $t('application.routine.rules.group2.btns')
                                    }}</a> 、</i>
                            <i class="link">{{ $t('application.routine.rules.group2.btn2') }}<a class="link-btn"
                                    :data-font="$i18n.locale" target="_blank"
                                    :href="$i18n.locale === 'zh' ? 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/%E7%94%9F%E7%89%A9%E4%BC%A6%E7%90%86%E6%89%BF%E8%AF%BA%E4%B9%A6.docx' : 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/Bioethics%20and%20Biosafety%20Consent%20Conform.docx'">{{
                                        $t('application.routine.rules.group2.btns')
                                    }}</a></i>
                            。<br>
                            <br>
                            {{ $t('application.routine.rules.group2.subheadings2') }}<br>
                            {{ $t('application.routine.rules.group2.p4') }}
                        </p>
                    </div>
                </div>
                <div class="rules-group">
                    <span class="title" :data-font="$i18n.locale">{{
                        $t('application.routine.rules.group3.title')
                    }}</span>
                    <div class="text">
                        <p :data-font="$i18n.locale" class="rules-content">
                            <span :data-font="$i18n.locale">{{
                                $t('application.routine.rules.group3.subheadings1')
                            }}</span>
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group3.p1')
                        }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">{{
                            $t('application.routine.rules.group3.p2')
                        }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">
                            {{ $t('application.routine.rules.group3.p3') }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">
                            {{ $t('application.routine.rules.group3.p4') }}
                        </p>
                        <br>
                        <p :data-font="$i18n.locale" class="rules-content">
                            <span :data-font="$i18n.locale">{{
                                $t('application.routine.rules.group3.subheadings2')
                            }}</span>
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">
                            <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group3.p5') }}</span>
                            {{
                                $t('application.routine.rules.group3.p6')
                            }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">
                            <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group3.p7') }}</span>
                            {{
                                $t('application.routine.rules.group3.p8')
                            }}
                        </p>


                    </div>
                </div>
                <div class="rules-group">
                    <span class="title" :data-font="$i18n.locale">{{
                        $t('application.routine.rules.group4.title')
                    }}</span>
                    <div class="text">
                        <p :data-font="$i18n.locale" class="rules-content">
                            <span :data-font="$i18n.locale">{{
                                $t('application.routine.rules.group4.subheadings1')
                            }}</span>
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">
                            {{ $t('application.routine.rules.group4.p1') }}
                        </p>
                        <br v-if="$i18n.locale == 'zh'">
                        <p :data-font="$i18n.locale" class="rules-content">
                            <span :data-font="$i18n.locale">{{
                                $t('application.routine.rules.group4.subheadings2')
                            }}</span>
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">
                            {{ $t('application.routine.rules.group4.p2') }}
                        </p>
                        <p :data-font="$i18n.locale" class="rules-content">
                            {{ $t('application.routine.rules.group4.p3') }}
                        </p>

                    </div>
                </div>
                <div class="rules-group">
                    <span class="title" :data-font="$i18n.locale">{{
                        $t('application.routine.rules.group5.title')
                    }}</span>
                    <ul class="scoring-metrics">
                        <li :data-font="$i18n.locale">
                            <el-image :src="require('@/assets/img/application/routine1.png')"></el-image>
                            <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group5.p1') }}</span>
                            <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group5.p2') }}</p>
                        </li>
                        <li :data-font="$i18n.locale">
                            <el-image :src="require('@/assets/img/application/routine2.png')"></el-image>
                            <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group5.p3') }}</span>
                            <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group5.p4') }}</p>
                        </li>
                        <li :data-font="$i18n.locale">
                            <el-image :src="require('@/assets/img/application/routine3.png')"></el-image>
                            <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group5.p5') }}</span>
                            <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group5.p6') }}</p>
                        </li>
                        <li :data-font="$i18n.locale">
                            <el-image :src="require('@/assets/img/application/routine4.png')"></el-image>
                            <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group5.p7') }}</span>
                            <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group5.p8') }}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 奖项 -->
        <div v-show="tabIndex === 1">
            <div class="awards-groups">
                <ul class="awards-group">
                    <li :data-font="$i18n.locale" :data-index="1">
                        <el-image :src="require('@/assets/img/application/awards1.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p1') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p2') }}</p>
                    </li>
                </ul>
                <ul class="awards-group">
                    <li :data-font="$i18n.locale" :data-index="2">
                        <el-image :src="require('@/assets/img/application/awards2.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p1') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p2') }}</p>
                    </li>
                </ul>
                <ul class="awards-group">
                    <li :data-font="$i18n.locale" :data-index="3">
                        <el-image :src="require('@/assets/img/application/awards2.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p3') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p4') }}</p>
                    </li>
                    <li :data-font="$i18n.locale" :data-index="4">
                        <el-image :src="require('@/assets/img/application/awards3.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p5') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p6') }}</p>
                    </li>
                </ul>
                <ul class="awards-group">
                    <li :data-font="$i18n.locale" :data-index="5">
                        <el-image :src="require('@/assets/img/application/awards4.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p7') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p8') }}</p>
                    </li>
                    <li :data-font="$i18n.locale" :data-index="6">
                        <el-image :src="require('@/assets/img/application/awards4.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p9') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p10') }}</p>
                    </li>
                    <li :data-font="$i18n.locale" :data-index="7">
                        <el-image :src="require('@/assets/img/application/awards4.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p11') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p12') }}</p>
                    </li>
                    <li :data-font="$i18n.locale" :data-index="8">
                        <el-image :src="require('@/assets/img/application/awards4.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p11') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p12') }}</p>
                    </li>
                    <li :data-font="$i18n.locale" :data-index="9">
                        <el-image :src="require('@/assets/img/application/awards4.png')"></el-image>
                        <span :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p11') }}</span>
                        <p :data-font="$i18n.locale">{{ $t('application.routine.rules.group6.p12') }}</p>
                    </li>
                    
                </ul>
            </div>
        </div>
        <!-- 底部报名按钮 -->

        <div class="application-btns">
            <el-button class="application-btn" @click="addRegistrationForm" :data-font="$i18n.locale">{{
                $t('application.routine.rules.btn')
            }}</el-button>
        </div>
    </div>
</template>

<!-- 常规 -->

<script>
export default {
    data() {
        return {
            tabIndex: 0
        }
    },
    methods: {
        addRegistrationForm() {
            this.$router.push('/limitedTime/registrationForm/routine')
        }
    },
    computed: {
        tabs() {
            return [{
                name: this.$t('application.routine.tabs.tab1'),
                id: 0
            },
            {
                name: this.$t('application.routine.tabs.tab2'),
                id: 1
            }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.tabs {
    display: flex;
    align-items: center;
    position: relative;

    .tabs-content {
        display: flex;
        align-items: center;
        position: relative;

        .tab {
            margin-right: 1.28rem;
            font-size: 1.17rem;
            font-weight: 400;
            color: #C5C5CA;
            line-height: 1.92rem;
            position: relative;
            transition: all .5s;
        }

        .tab[data-font='zh'] {
            font-family: 'AlibabaPuHuiTi-Regular', 'AlibabaPuHuiTi';
        }

        .tab[data-font='en'] {
            font-family: 'RNSSanzSC-Normal, RNSSanzSC';
        }

        .tab:nth-last-of-type(1) {
            margin-right: 0;
        }

        .active::before {
            content: '';
            position: absolute;
            bottom: -0.18rem;
            width: 100%;
            height: 0.05rem;
            background: #7709CC;
        }

        .active {
            color: #212121;
            font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaPuHuiTi';
            font-weight: bold;
        }
    }

    .tabs-content::before {
        content: '';
        width: 100%;
        height: 0.03rem;
        background: #C5C5CA;
        position: absolute;
        bottom: -0.21rem;
        left: 0;
    }
}

.rules-groups {
    width: 32rem;
    margin-top: 0.88rem;

    .rules-group {
        .title {
            height: 0.96rem;
            font-size: 0.59rem;
            color: #212121;
            line-height: 0.96rem;
            margin-bottom: 0.21rem;
        }

        .title[data-font='zh'] {
            font-weight: normal;
            font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
        }

        .title[data-font='en'] {
            font-weight: bold;
            font-family: 'Helvetica-Bold, Helvetica';
        }

        .text {
            .rules-content {
                font-weight: normal;
                color: #68656C;
            }

            .rules-content[data-font='zh'] {
                letter-spacing: 0.05rem;
                font-size: 0.53rem;
                line-height: 0.85rem;
                font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            }

            .rules-content[data-font='en'] {
                font-size: 0.48rem;
                line-height: 0.75rem;
                font-family: 'Helvetica';
                word-break: keep-all;
            }


            span[data-font='zh'] {
                font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
                color: #68656C;
            }

            span[data-font='en'] {
                font-weight: bold;
                font-family: 'Helvetica-Bold, Helvetica';
                color: #68656C;
            }
        }

        .scoring-metrics {
            margin-top: 0.64rem;
            width: 32rem;
            display: flex;
            align-items: center;
            justify-content: space-around;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;

                .el-image {
                    width: 3.2rem;
                    height: 3.2rem;
                    margin-bottom: 0.37rem;
                }

                span {
                    margin-bottom: 0.11rem;
                }

                span {
                    height: 0.96rem;
                    font-size: 0.59rem;
                    color: #212121;
                    line-height: 0.96rem;
                }

                span[data-font='zh'] {
                    font-weight: normal;
                    font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
                }

                span[data-font='en'] {
                    font-weight: bold;
                    font-family: 'Helvetica-Bold, Helvetica';
                }

                p {
                    font-size: 0.53rem;
                    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    font-weight: normal;
                    color: #68656C;
                    line-height: 0.85rem;
                    text-align: center;
                }

            }

            li[data-font='en']:nth-of-type(1) {
                width: 5.87rem;
            }

            li[data-font='en']:nth-of-type(2) {
                width: 5.87rem;
            }

            li[data-font='en']:nth-of-type(3) {
                width: 5.25rem;
            }

            li[data-font='en']:nth-of-type(4) {
                width: 5.25rem;
            }

            li[data-font='en'] {
                p {
                    word-break: keep-all;
                }
            }
        }
    }
}

.application-btns {
    width: 32rem;
    padding: 1.28rem 0;
    text-align: center;

    .application-btn {
        width: 12.64rem;
        height: 1.6rem;
        background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
        border-radius: 0.21rem;
        backdrop-filter: blur(10px);

        :deep(span) {
            font-size: 0.64rem;
            font-weight: normal;
            color: #FFFFFF;
            line-height: 0.96rem;
        }
    }

    .application-btn[data-font='zh'] :deep(span) {
        font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
    }

    .application-btn[data-font='en'] :deep(span) {
        font-family: 'PingFangSC-Regular, PingFang SC';
    }
}

.awards-groups {
    margin-top: 1.52rem;

    li[data-font='en'][data-index='1'] {
        max-width: 9.95rem;
    }

    li[data-font='en'][data-index='2'] {
        max-width: 7.28rem;
    }

    li[data-font='en'][data-index='3'] {
        max-width: 7.28rem;
    }

    li[data-font='en'][data-index='4'] {
        max-width: 5.87rem;
    }

    li[data-font='en'][data-index='5'] {
        max-width: 5.87rem;
    }

    li[data-font='en'][data-index='6'] {
        max-width: 5.87rem;
    }

    li[data-font='en'][data-index='7'] {
        max-width: 3.7rem;
    }

    li[data-font='en'][data-index='8'] {
        max-width: 3.7rem;
    }

    li[data-font='en'][data-index='9'] {
        max-width: 3.7rem;
    }

    .awards-group {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;

        li {
            display: flex;
            flex-direction: column;
            align-items: center;

            .el-image {
                width: 3.2rem;
                height: 3.2rem;
                margin-bottom: 0.43rem;
            }

            span {
                font-size: 0.59rem;
                color: #212121;
                line-height: 0.96rem;
                text-align: center;
            }

            span[data-font='zh'] {
                font-weight: normal;
                font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
            }

            span[data-font='en'] {
                font-weight: bold;
                font-family: 'Helvetica-Bold, Helvetica';
            }

            p {
                font-size: 0.53rem;
                font-weight: normal;
                color: #68656C;
                line-height: 0.85rem;
            }

            p[data-font='zh'] {
                font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            }

            p[data-font='en'] {
                word-break: keep-all;
                // word-wrap: break-word;
                font-family: 'Helvetica';
            }
        }
    }

    .awards-group:nth-of-type(1) {
        margin-bottom: 1.23rem;
    }

    .awards-group:nth-of-type(2) {
        margin-bottom: 0.51rem;
    }
}

.awards-groups[data-font='en'] {
    padding: 0 3.2rem;
}

.awards-groups[data-font='zh'] {
    padding: 0 5.01rem;
}

.link {
    font-style: normal;
    color: #7709CC;
}

.link[data-font='en'] {
    font-family: 'PingFangSC-Regular', 'sans-serif';
}

.link-btn {
    background: linear-gradient(315deg, rgba(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
    border-radius: 0.11rem;
    border: 0.03rem solid #7709CC;
    backdrop-filter: blur(10px);
    padding: 0.03rem 0.21rem;
}

.link-btn[data-font='zh'] {
    font-size: 0.37rem;
    font-weight: normal;
    color: #7709CC;
    font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
    letter-spacing: 0;
}

.link-btn[data-font='en'] {
    font-size: 0.37rem;
    font-family: 'Helvetica-Light', 'Helvetica';
    font-weight: 300;
    color: #7709CC;
    line-height: 0.56rem;
}
</style>